<template>
  <a-drawer :title="modalTitle" width="100%" :visible="modalVisible" :body-style="{ paddingBottom: '80px', paddingRight: '20px' }" @close="handleCancel">
    <a-spin tip="加载中..." :spinning="spinning">
      <a-steps class="steps-style" :current="current" v-if="steps && steps.length > 1">
        <a-step v-for="item in steps" :key="item.fileType" :title="item.fileName" />
    </a-steps>
      <div class="steps-content">
        <splitpanes class="default-theme" @resize="resize" @resized="resized">
          <pane min-size="25" size="40">
            <a-form-model ref="formComponentRef" :rules="rules" :model="infoForm" style="margin: 20px 20px;overflow: auto;max-height: 800px;">
              <div v-for="(formItem, index) in currentFormSetting.formItem" :key="index">
                <a-form-model-item v-show="formItem.show" v-if="formItem.type == 'input'" :label-col="formItem.labelCol" :wrapper-col="formItem.wrapperCol" :label="formItem.name" :prop="formItem.key">
                  <a-input v-model="infoForm[formItem.key]" :placeholder="formItem.placeholder" @blur="previewDocByDocName" :disabled="formItem.disabled" />
                </a-form-model-item>

                <a-form-model-item v-show="formItem.show" v-if="formItem.type == 'textarea'" :label-col="formItem.labelCol" :wrapper-col="formItem.wrapperCol" :label="formItem.name" :prop="formItem.key">
                  <a-textarea v-model="infoForm[formItem.key]" allow-clear :auto-size="{ minRows: 5, maxRows: 7 }"  :placeholder="formItem.placeholder" :disabled="formItem.disabled"
                    @blur="previewDocByDocName" />
                </a-form-model-item>

                <a-form-model-item v-show="formItem.show" v-if="formItem.type == 'date'" :label-col="formItem.labelCol" :wrapper-col="formItem.wrapperCol" :label="formItem.name" :prop="formItem.key">
                  <a-date-picker v-model="infoForm[formItem.key]" :style="{ width: 'calc(50% - 12px)', float: 'left' }" :disabled="formItem.disabled" :placeholder="formItem.placeholder"
                    :format="formItem.format" allowClear @change="previewDocByDocName" />
                </a-form-model-item>

                <a-form-model-item v-show="formItem.show" v-if="formItem.type == 'number'" :label-col="formItem.labelCol" :wrapper-col="formItem.wrapperCol" :label="formItem.name" :prop="formItem.key">
                  <a-input-number :style="{ width: 'calc(30% - 12px)', float: 'left' }"  :min="formItem.min" :max="formItem.max" v-model="infoForm[formItem.key]" :placeholder="formItem.placeholder" :disabled="formItem.disabled" @blur="previewDocByDocName" />
                </a-form-model-item>

                <a-form-model-item v-show="formItem.show" v-if="formItem.type == 'select'" :label-col="formItem.labelCol" :wrapper-col="formItem.wrapperCol" :label="formItem.name" :prop="formItem.key">
                  <a-select v-model="infoForm[formItem.key]" :placeholder="formItem.placeholder" :disabled="formItem.disabled" @blur="previewDocByDocName" allowClear>
                    <a-select-option v-for="source in formItem.sourceData" :key="source[formItem.source.key]" :value="source[formItem.source.value]">
                      {{ source[formItem.source.showKey] }}
                    </a-select-option>
                  </a-select>
                </a-form-model-item>

              </div>
            </a-form-model>
          </pane>
          <pane min-size="25">
            <div class="pane_right">
              <div ref="file" :loading="previewLoading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)"
                   style="height:800px;overflow-y:auto;">
              </div>
            </div>
          </pane>
        </splitpanes>

        <div class="button-div">
          <a-button style="margin-right: 20px;" @click="handleCancel" :loading="loading" > 取消 </a-button>
          <a-button type="primary" icon="download" style="margin-right: 20px;" @click="download" :loading="loading">
            下载
          </a-button>
          <a-button type="primary" :loading="loading" icon="step-backward" v-if="current > 0" style="margin-right: 20px;" @click="prev">
            上一步
          </a-button>
          <a-button  icon="step-forward" :loading="loading" v-if="current < steps.length - 1" type="primary" @click="next" style="margin-right: 20px">
            下一步
          </a-button>
          <a-button type="primary"  style="margin-right: 20px;" @click="saveDoc" :loading="loading">
            保存
          </a-button>
          <a-button v-if="current == steps.length - 1" type="primary" icon="save" @click="onSubmit" :loading="loading" style="margin-right: 20px">
            提交
          </a-button>
        </div>

      </div>
    </a-spin>
  </a-drawer>
</template>
<script>
import { BaseCaseHandleMinxin } from '../minxin/BaseCaseHandleMinxin'
export default {
  mixins: [BaseCaseHandleMinxin],
  data() {
    return {}
  },
  watch: {},
  methods: {}
}
</script>
        
<style lang="scss" scoped>
.button-div {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  border-top: 1px solid #e9e9e9;
  padding: 10px 16px;
  background: #fff;
  text-align: center;
  z-index: 1;
}

.steps-style {
  width: 50%;
  margin: auto;
}

::v-deep .ant-form-explain {
  float: left;
}
</style>
            